<template>
	<view class="item">
		<text>姓名</text>
		<input type="text" placeholder="请输入姓名" v-model="content.name" />
	</view>
	<view class="item">
		<text>手机号码</text>
		<input type="text" placeholder="请输入手机号码" v-model="content.phone" />
	</view>
	<view class="item">
		<text>邮政编码</text>
		<input type="text" placeholder="请输入邮编" v-model="content.code" />
	</view>
	<view class="item">
		<text>所在区域</text>
		<uni-data-picker placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="dataTree" v-model="content.area"
			@change="onchange" >
		</uni-data-picker>
	</view>
	<view class="item">
		<text>详细地址</text>
		<input type="text" placeholder="请输入详细地址" v-model="content.place" />
	</view>
	<view class="item">
		<checkbox-group @change="radioChange">
			<label class="radio">
				<checkbox value="1" :checked="content.type?true:false"  /><text>设为默认地址</text>
			</label>
		</checkbox-group>
		
	</view>
	<button @click="goto()">保存</button>
	
</template>

<script>
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import myRequest from '../../../utils/myRequest.js'
	import store from '../../../store/index.js'
	export default {
		setup() {
			let data = reactive({
				vipId:'',
				flag:0,
				list:[],
				content:{
					name:'',
					phone:'',
					code:'',
					area:'',
					place:'',
					type:0},
				classes: '四川省成都市',
				dataTree: [{
						text: "四川省",
						value: "四川省",
						children: [{
								text: "成都市",
								value: "四川省成都市",
								children:[
									{text:'武侯区',value:'四川省成都市武侯区'},
									{text:'高新区',value:'四川省成都市高新区',},
									{text:'金牛区',value:'四川省成都市金牛区',},
									{text:'青羊区',value:'四川省成都市青羊区',}]
							},
							{
								text: "绵阳市",
								value: "四川省绵阳市"
							}
						]
					},
					{
						text: "广东省",
						value: "广东省",
						children: [{
								text: "广州市",
								value: "广东省广州市"
							},
							{
								text: "珠海市",
								value: "广东省珠海市"
							}
						]
					},
					{
						text: "湖南省",
						value: "湖南省",
						disable: true
					}
				],
				goto() {
					if(data.content.type){
						myRequest({
							url:'/getharvest',
							data:{
								vipId:store.state.userdata[0].vipId
							}
						}).then((res)=>{
							this.list=res.data.data;
							for(let i=0;i<this.list.length;i++){
								if(this.content.id && this.list[i].id==this.content.id){
									this.list[i].type=1;
								}else{
									this.list[i].type=0
								}
							}
							this.list.forEach(v=>{
								myRequest({
									url:'/editharvest',
									method:'post',
									data:{
										id:v.id,
										name:v.name,
										phone:v.phone,
										code:v.code,
										area:v.area,
										place:v.place,
										type:v.type,
									}
								})
							})
						})
						
					}
					if(data.flag){
						myRequest({
							url:'/editharvest',
							method:'post',
							data:{
								id:this.content.id,
								name:this.content.name,
								phone:this.content.phone,
								code:this.content.code,
								area:this.content.area,
								place:this.content.place,
								type:this.content.type
							}
						}).then(res=>{
							if(res.data.code==200){
								uni.navigateTo({
									url: '/pages/My/HarvestAddress/HarvestAddress'
								})
							}
						})
					}else{
					myRequest({
						url:'/addharvest',
						method:'post',
						data:{
							name:this.content.name,
							phone:this.content.phone,
							code:this.content.code,
							area:this.content.area,
							place:this.content.place,
							type:this.content.type,
							vipId:this.vipId
						}
					}).then(res=>{
						uni.navigateTo({
							url: '/pages/My/HarvestAddress/HarvestAddress'
						})
					});}
					
				},
				onchange(e) {
					let index=e.detail.value.length-1;
					data.content.area=e.detail.value[index].value;
				},
				radioChange(e){
					if(e.detail.value==1){
						this.content.type=1;
					}else{
						this.content.type=0;
					}
				},
				
			})
			onMounted(()=>{
				data.vipId=store.state.userdata[0].vipId;
				if(data.flag){
					data.content=JSON.parse(uni.getStorageSync('address'))||data.content;
				}
				
			})
			onLoad((e)=>{
				data.flag=e.flag
			})
			return {
				...toRefs(data)
			}
		},

	}
</script>

<style lang="scss">
	.dialog-close-plus{
		width: 20rpx!important;
	}
	.check{
		width: 8rpx!important;
		height: 13rpx !important;
	}
	.input-value-border{
		border: 0px solid #000!important;
		width: 400rpx;
		height: 80rpx;
		
	}
	.icon-clear{
		display: none;
	}
	.input-value,.selected-list{
		padding:0!important;
	}
	.selected-list{
		color: #000000;
	}
	.placeholder,.selected-list,.dialog-caption,{
		text-align: center;
		font-size: 28rpx;
	}
	.item {
		font-size: 28rpx;
		color: #999999;
		padding: 0 25rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F2F2F2;
		height: 80rpx;

		text:first-child {
			width: 200rpx;
		}
		checkbox {
			transform: scale(0.6);
		}
	}

	button {
		width: 750rpx;
		background-color: #007AF6;
		color: white;
		border-radius: 0;
	}
	input{
		color: #000000;
	}
</style>
